<template>
	<view class="shop_detail">
		<image src="/static/images/img.jpeg" class="shop_detail_img" mode=""></image>
		<view class="shop_detail_info">
			<view class="shop_detail_info_title">
				鸡爪
			</view>
			<view class="shop_detail_info_price">{{info.price}}</view>
		</view>
	</view>
	<view class="shop_sku">
		<view class="shop_sku_specs">
			<view class="shop_sku_specs_name">
				产品规格
			</view>
			<view class="shop_sku_specs_box">
				<view class="shop_sku_specs_box_item" @click="change(index, 'specs')"
					:class="index == current.specs ?'active':''" v-for="(item, index) in specs" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="shop_sku_specs_tips">
				{{info.desc}}
			</view>
		</view>
		<view class="shop_sku_number">
			<view class="shop_sku_number_name">
				购买数量
			</view>
			<view class="shop_sku_number_box">
				<view class="shop_sku_number_box_reduce" @click="onNumber('reduce')">
					-
				</view>
				<input class="shop_sku_number_box_input" type="text" v-model="current.number" />
				<view class="shop_sku_number_box_increase" @click="onNumber('increase')">
					+
				</view>
			</view>
		</view>
		<view class="shop_sku_process">
			<view class="shop_sku_process_name">
				是否加工
			</view>
			<view class="shop_sku_process_box">
				<view class="shop_sku_process_box_item" @click="change(index, 'process')"
					:class="index == current.process ?'active':''" v-for="(item, index) in process" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="shop_sku_process_tips" v-if="processInfo.price">
				{{processInfo.price}}元{{processInfo.desc}}
			</view>
		</view>
	</view>
	<view class="shop_settlement">
		<view class="shop_settlement_left">
			<view class="shop_settlement_left_box">
				<view class="shop_settlement_left_total">{{total}}</view>
				<view class="shop_settlement_left_unit">{{count}}{{info.unit}}</view>
			</view>
			<view class="shop_settlement_left_detail">￥{{priceCount}}+{{processCount}}元加工费</view>
		</view>
		<button class="shop_settlement_btn">加入购物车</button>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue"

	//详情
	let info = ref({});
	//加工配置
	let processInfo = ref({});

	let priceCount = computed(() => {
		return info.value.price * current.value.number;
	})

	let processCount = computed(() => {
		return processInfo.value.price * current.value.number;
	})
	//总计
	let total = computed({
		get() {
			return info.value.price * current.value.number + processInfo.value.price * current.value.number;
		}
	});

	let count = computed({
		get() {
			return info.value.number * current.value.number;
		}
	})

	let extra = computed({
		get() {
			return ''
		}
	})

	let current = ref({
		specs: 0,
		process: 0,
		number: 1
	})

	let process = ref([{
		name: "无需加工",
		price: 0,
		desc: ""
	}, {
		name: "卤制",
		price: 2,
		desc: "包含卤制加工以及包装费用。"
	}, {
		name: "卤制+切装",
		price: 3,
		desc: "包含卤制加工+切片调料以及包装费用。"
	}])

	let specs = ref([{
			name: "500克",
			number: 500,
			desc: "根据您的需求添加购买数量",
			unit: "克",
			price: 28.5
		},
		{
			name: "家宴小份",
			number: 1,
			desc: "建议1桌小份重量大约400克",
			unit: "份",
			price: 25.5
		},
		{
			name: "家宴大份",
			number: 1,
			desc: "建议1桌大份重量大约600克",
			unit: "份",
			price: 36.5
		},
	])


	onMounted(() => {
		info.value = specs.value[current.value.specs];
		processInfo.value = process.value[current.value.process];
	})

	const change = (index, name) => {
		current.value[name] = index;
		if (name == 'specs') {
			info.value = specs.value[current.value.specs];
		}
		if (name == 'process') {
			processInfo.value = process.value[current.value.process];
		}
	}

	const onNumber = (type) => {
		if (type == 'increase') {
			current.value.number++;
		} else {
			current.value.number--;
		}
	}
</script>

<style lang="scss" scoped>
	.shop {
		&_settlement {
			margin: 80rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&_left {
				&_detail {
					font-size: 22rpx;
					background: #eee;
					color: #666;
					display: unset;
					padding: 2rpx 10rpx;
					border-radius: 20rpx;
				}

				&_box {
					width: 280rpx;
					display: flex;
					align-items: center;
					line-height: 36rpx;
				}

				&_unit {
					font-size: 24rpx;
				}

				&_total {
					font-size: 50rpx;
					color: #f00;
					margin-right: 20rpx;

					&::before {
						content: "￥";
						font-size: 24rpx;
					}
				}
			}


			&_btn {
				background: var(--color);
				color: #fff;
				border-radius: 0;
				width: calc(100% - 260rpx);
				margin: 0;
			}
		}

		&_sku {
			.active {
				background: var(--color);
				color: #fff;
			}

			&_process {
				margin: 30rpx;

				&_name {
					font-weight: bold;
					font-size: 28rpx;
				}

				&_tips {
					font-size: 24rpx;
					color: #999;
					margin-top: 30rpx;
				}

				&_box {
					display: flex;
					margin-top: 20rpx;

					&_item {
						background: #f5f5f5;
						margin-right: 30rpx;
						padding: 10rpx 25rpx;
					}
				}
			}

			&_number {
				margin: 50rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&_name {
					font-weight: bold;
					font-size: 28rpx;
				}

				&_box {
					display: flex;

					&_reduce {
						background: #eee;
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
					}

					&_increase {
						background: #eee;
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
					}

					&_input {
						width: 100rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
					}
				}
			}

			&_specs {
				margin: 30rpx;

				&_name {
					font-size: 28rpx;
					font-weight: bold;
				}

				&_tips {
					font-size: 24rpx;
					color: #999;
					margin-top: 30rpx;
				}

				&_box {
					display: flex;
					margin-top: 20rpx;

					&_item {
						background: #f5f5f5;
						margin-right: 30rpx;
						padding: 10rpx 25rpx;
					}
				}
			}
		}

		&_detail {
			display: flex;
			align-items: center;
			margin: 30rpx;

			&_img {
				width: 200rpx;
				height: 150rpx;
				margin-right: 20rpx;
			}

			&_info {
				&_title {
					font-size: 36rpx;
					font-weight: bold;
				}

				&_price {
					font-size: 38rpx;
					color: #f00;

					&::before {
						content: "￥";
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>